<template>
  <div class="alter">
    <el-form
      :inline="true"
      ref="refRuleFormmd"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item style="margin-top:20px" label="id" prop="userId" v-show="">
        <el-input v-model="listt.userId"></el-input>
      </el-form-item>
      <el-form-item style="margin-top:20px;margin-left:20px" label="用户头像" prop="userimg">
        <el-upload
          class="avatar-uploader"
          action=""
          v-model="listt.userImg"
          :http-request="uploadURL"
          :multiple="true"
          :before-upload="handleBeforeUpload"
          accept="image/png, image/gif, image/jpg, image/jpeg"
          :limit="3"
        >
          <el-avatar :size="70">
            <img
              v-if="listt.userImg"
              :src="listt.userImg"
              ref="myImg"
              class="avatar"
            />
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-avatar>
        </el-upload>
      </el-form-item>

      <el-form-item  label="用户名" prop="userNick">
        <el-input v-model="listt.userNick"></el-input>
      </el-form-item>
      <el-form-item   label="性别" prop="userSex">
        <el-select v-model="listt.userSex" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="userAge">
        <el-input v-model="listt.userAge"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" prop="birthday" disabled>
        <el-input v-model="listt.birthday" disabled></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="userPhone" disabled>
        <el-input v-model="listt.userPhone" disabled></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      
      <el-button @click="qued" style=" float: right;">确定</el-button>
      <el-button @click="addBanner"  >返回</el-button>
    </span>
  </div>
</template>

<script>
import {client,getFileNameUUID} from './alioss'
import axios from "axios";
import { Toast } from 'vant';
export default {
  data() {
    return {
      listt: [],
      userId:"",
       options:[{
        value: 1,
        label: '男'
      },{
        value: 2,
        label: '女'
      }
      ]
    };
  },
  created() {
    this.getuserliat();
  },
  methods: {
    //反会
    addBanner(){
        this.$router.go(-1)
    },
    //完善个人资料
    qued() {
      axios({
        url: "/api/user/getupdate",
        method: "post",
        params: this.listt,
      }).then((res) => {
        
         
        console.log(res);
        this.listt = res.data;
        this.dialogVisible = false;
        this.getuserliat();
        Toast.success('完善成功');
        this.$router.push({path:"/addBanner"})
        this.$router.go(0)
      });
      if (location.href.indexOf("#D") == -1) {
        location.href = location.href + "#D";
        location.reload();
      }
    },

    handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 4mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
			uploadURL(file) {
				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
				var fileName = 'img/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
                                  //
          this.listt.userImg ='http://wwssbb.oss-cn-hangzhou.aliyuncs.com/' + fileName;
        })
			},

    handleEdit() {
      this.dialogVisible = true;
    },

    getuserliat() {
      axios({
        url: "/api/user/userlist",
        method: "GET",
        params: {
          userId: Number(JSON.parse(localStorage.getItem('user')).userId),
        },
      }).then((res) => {
        this.listt = res.data;
        console.log(this.listt);
        this.userId = this.listt.userId;
        console.log(this.userId);
      });
    },
  },
};
</script>

<style>
.alter{
    width: 100%;
    height: 100%;
    background-color: #fff;
   position: relative;
  	 z-index: 9;
  	 height: 100vh;
  	

  	 overflow-y: auto;
}
</style>